<template>
  <el-popover placement="bottom" v-model="visible">
    <div class="stu-select-filter">
      <KeywordInput v-model="condition.condition" @enter="search" placeholder="label.courseCodeOrCourseName"></KeywordInput>
      <el-button type="text"  @click="clearValue()" size="mini" class="float-right">{{$t('message.clear')}}</el-button>
      <div style="width:600px;margin-top: 4px;">
        <edu-table :data="dataList" :total="total" ref="tableRef" @page-change="onCurrentPageChange" 
          :pageSize="condition.pageSize_" 
          :order="false" :selection="false" :max-height="260"  @refresh-click="search"
          paginationLayout="prev, pager, next" paginationStyle="" :paginationShowRefresh="true">
            <edu-table-column :label="$t('label.courseCode')" prop="code"/>
            <edu-table-column :label="$t('label.courseName')" prop="name"/>
            <edu-table-column :label="$t('message.nameEn')" prop="nameEn"/>
            <edu-table-column :label="$t('label.college')" prop="collegeI18n"/>
            <edu-table-column :label="$t('label.operation')">
              <template slot-scope="scope">
                <el-button type="text"  @click="select(scope.row)" size="mini" >{{$t('选择')}}</el-button>
              </template>
            </edu-table-column>
        </edu-table>
      </div>
    </div>
    <div slot="reference">
      <el-input class="select-input"  style="width:100%;" :readonly="readonly" @click="handlerClick"
        v-model="labelValue" :placeholder="$t('common.pla.pleaseSelect')">
        <i slot="suffix" class="el-input__icon el-icon-arrow-up" 
              :class="{'is-reverse': visible}"></i>
      </el-input>
    </div>
  </el-popover>


</template>
<script>
import { getCourseList} from "common/src/api/courseTemplate";
import { findOriginCourse, findNewCourse, findOriginCourseByStudentIds} from "common/src/api/election/noGradCouSub"
import UTILS from "common/src/utils/utils";
/**
 * 课程下拉框组件
 */
export default {
  name: "EduCourseSelect",
  props: {
    value: {required: true},
    clearable:{default: false},
    readonly: {default: true},
    valueKey: {default: 'code'},
    queryParam: {default: () => {}},
    multiple: {default: false}, // 是否多选
    autoLoad: {default: true}, // 是否自动加载
    type: {default: null},
  },
  data() {
    return {
      dataList: [],
      studentId: '', //分页查询时用到
      labelValue: '',
      condition: {
        condition: "",
        pageNum_: 1,
        pageSize_: 10,
      },
      visible: false,
      total: 0,
      courseType: null
    }
  },
  mounted() {
    if(this.autoLoad){
      this.search();
    }
  },
  watch:{
    value(val, oldVal) {
        if(!val){
          this.labelValue = '';
        }
    },
    queryParam(val, oldVal) {
        this.search();
    }
  },
  methods: {
    clearKey() {
      this.condition.condition = '';
    },
    handlerClick(){
      this.visible = !this.visible;
    },
    select(stu){
      this.visible = false;
      this.setValue(stu);
    },
    clearValue() {
      this.setValue(null);
    },
    setValue(course){
      this.labelValue = '';
      let value = "";
      if(course){
        value = course[this.valueKey];
        this.labelValue = course.name +'(' + course.code +')';
      }else {
         value = null;
         this.labelValue = '';
      }
      this.$emit("input", value);
      if(!_.isEqual(this.value, value)){
        this.$emit('change', value);
      }
    },
    searchCommon(param) {
      let queryData = UTILS.clone(this.condition == null ? {} : this.condition);
      if(_.isNil(queryData.pageSize_)) {
        queryData.pageSize_ = 10;
      }
      if(_.isNil(queryData.pageNum_)) {
        queryData.pageNum_ = 1;
      }
      queryData = _.extend(queryData, this.queryParam, param);
      const temps = {
            pageNum_: queryData.pageNum_,
            pageSize_: queryData.pageSize_,
            condition:{
              keyword: queryData.condition,
              studentIds: queryData.studentId,
              courseType: queryData.courseType
            }
      }
      if(temps.condition.studentIds || this.studentId) {
                if(!temps.condition.studentIds &&  this.studentId) {
                    temps.condition.studentIds = this.studentId;
                }else {
                  this.studentId = temps.condition.studentIds;
                }
                findOriginCourseByStudentIds(temps).then(res => {
                this.dataList = res.data.list;
                this.total = res.data.total_;
                if(this.value){
                  _.forEach(this.dataList, course => {
                    if(this.value == course[this.valueKey]){
                      this.setValue(course);
                    }
                  });
                }
                this.$emit('load-done', this.dataList);
              });  
      }
    },
    search(param) {
      if(param&&param.courseType) {
        this.courseType = param.courseType
      }
      let queryData = UTILS.clone(this.condition == null ? {} : this.condition);
      if(_.isNil(queryData.pageSize_)) {
        queryData.pageSize_ = 10;
      }
      if(_.isNil(queryData.pageNum_)) {
        queryData.pageNum_ = 1;
      }
       queryData = _.extend(queryData, this.queryParam, param);
       if(this.type) {
          const temp = {
            pageNum_: queryData.pageNum_,
            pageSize_: queryData.pageSize_,
            condition:{
              keyword: queryData.condition,
              studentId: queryData.studentId,
              courseType: this.courseType
            }
          }
          const temps = {
            pageNum_: queryData.pageNum_,
            pageSize_: queryData.pageSize_,
            condition:{
              keyword: queryData.condition,
              studentIds: queryData.studentId,
              courseType: this.courseType
            }
          }
          if(this.type === 'old') {
            if(temp.condition.studentId || this.studentId) {
                if(!temp.condition.studentId &&  this.studentId) {
                    temp.condition.studentId = this.studentId;
                }else {
                  this.studentId = temp.condition.studentId;
                }
                findOriginCourse(temp).then(res => {
                this.dataList = res.data.list;
                this.total = res.data.total_;
                if(this.value){
                  _.forEach(this.dataList, course => {
                    if(this.value == course[this.valueKey]){
                      this.setValue(course);
                    }
                  });
                }
                this.$emit('load-done', this.dataList);
              });  
            }
          }else if (this.type === 'new') {
             findNewCourse(temp).then(res => {
              this.dataList = res.data.list;
              this.total = res.data.total_;
              if(this.value){
                _.forEach(this.dataList, course => {
                  if(this.value == course[this.valueKey]){
                    this.setValue(course);
                  }
                });
              }
              this.$emit('load-done', this.dataList);
             });
          } else if(this.type === 'common') {
            if(temps.condition.studentIds || this.studentId) {
                if(!temps.condition.studentIds &&  this.studentId) {
                    temps.condition.studentIds = this.studentId;
                }else {
                  this.studentId = temps.condition.studentIds;
                }
                findOriginCourseByStudentIds(temps).then(res => {
                if(!res.data) {
                  this.dataList = []
                  this.total = 0
                }
                this.dataList = res.data.list;
                this.total = res.data.total_;
                if(this.value){
                  _.forEach(this.dataList, course => {
                    if(this.value == course[this.valueKey]){
                      this.setValue(course);
                    }
                  });
                }
                this.$emit('load-done', this.dataList);
              });  
            }
          }
        }else {
          getCourseList(queryData).then(res => {
            this.dataList = res.data.list;
            this.total = res.data.total_;
            if(this.value){
              _.forEach(this.dataList, course => {
                if(this.value == course[this.valueKey]){
                  this.setValue(course);
                }
              });
            }
            this.$emit('load-done', this.dataList);
          });
      }
    },
    onCurrentPageChange(pager) {
      this.condition.pageSize_ = pager.pageSize;
      this.condition.pageNum_ = pager.pageNum;
      this.search();
    },
  },
  created() {
    if (this.multiple && !Array.isArray(this.value)) {
        this.$emit("input", []);
    }
    if (!this.multiple && Array.isArray(this.value)) {
        this.$emit("input", "");
    }
  },
};

</script>

<style lang="scss" scoped>
.stu-select-filter{
  .select-input{
    input{
      cursor: pointer;
    }
  }
}
.el-input__icon.el-icon-arrow-up{
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
  transition: transform .3s,-webkit-transform .3s;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  &.is-reverse{
      -webkit-transform: rotateZ(0);
      transform: rotateZ(0);
  }
}
</style>